<!-- 全局配置 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showSet="false" @changeSize="changeSize"
    @changePage="changePage" @reset="resetDetails" @search="getSearchList">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
    </template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width" />
      </template>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template #default="scope">
          <el-button type="warning" v-permiss="'/system/destroyManager'" size="small" @click="checkAgent(scope.row)">
            编辑商户全局表配置
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 全局表配置 -->
  <el-dialog v-model="data.isShowGlobal" title="全局表配置" :close-on-click-modal="false" :close-on-press-escape="false"
    width="65%" top="12vh" @close="onHideDetails">
    <div v-loading="indexStore.moduleLoading" class="dialogMaxHeight">
      <SearchTable :query="data.queryGlobal" :list="data.listGlobal" :total="data.totalGlobal" :showSet="false"
        @changeSize="changeSizeGlobal" @changePage="changePageGlobal" @reset="resetDetails"
        @search="getGlobalList">
        <template #form>
          <el-form-item label="">
            <p class="box-title mustPass">
              【{{ data.checkedGlobal.id }}】 {{ data.checkedGlobal.agent_name }}
            </p>
          </el-form-item>
          <el-form-item label="ID：">
            <el-input class="width240" type="text" v-model="data.queryGlobal.id" placeholder="请输入数据ID" clearable />
          </el-form-item>
          <el-form-item label="备注：">
            <el-input class="width240" type="text" v-model="data.queryGlobal.remark" placeholder="请输入备注" clearable />
          </el-form-item>
        </template>
        <template #button></template>
        <template #table>
          <template v-for="(item, index) in data.fieldsGlobal" :key="index">
            <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width" />
          </template>
          <el-table-column fixed="right" label="操作" width="120" align="center">
            <template #default="scope">
              <el-button type="warning" v-permiss="'/system/destroyManager'" size="small"
                @click="checkDetails(scope.row)">
                编 辑
              </el-button>
            </template>
          </el-table-column>
        </template>
      </SearchTable>
    </div>
  </el-dialog>

  <!-- 默认游戏配置 -->
  <Global :show="data.isShowDetails" :isDisableUser="data.isDisableUser" :checkedItem="data.checkedItem"
    @onHideDetails="onHideDetails" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import Global from '@/views/configManage/components/global.vue'
import { getGlobal, getGlobalAgent } from '@/api/game'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    operated_id: -1,
    agent_id: -1,
  },
  list: [],
  total: 0,
  fields: [
    { label: 'ID', prop: 'id', width: '', visible: true },
    { label: '商户昵称', prop: 'agent_name', width: '', visible: true },
  ],
  queryGlobal: {
    page: 1,
    size: 50,
    agent_id: -1,
    id: '',
    remark: '',
  },
  listGlobal: [],
  totalGlobal: 0,
  fieldsGlobal: [
    { label: 'ID', prop: 'id', width: '120', visible: true },
    { label: '备注', prop: 'remark', width: '300', visible: true },
    { label: '参数', prop: 'a_global_parameter', width: '', visible: true },
  ],
  isDisableUser: false,
  checkedItem: {} as any,
  checkedGlobal: {} as any,
  isShowDetails: false,
  isShowGlobal: false,
  listTable: [] as any[],
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  let query = JSON.parse(JSON.stringify(data.query))
  let res = await getGlobalAgent(query)
  data.list = res.data.list
  data.total = res.data.total
}

const getGlobalList = async () => {
  indexStore.setModuleLoading(true)
  let query = JSON.parse(JSON.stringify(data.queryGlobal))
  query.id = Number(query.id)
  let res = await getGlobal(query)
  data.listGlobal = res.data.list
  data.totalGlobal = res.data.total
}

// 详情
const checkAgent = async (row: any) => {
  data.checkedGlobal = row
  data.queryGlobal.agent_id = row.id
  data.isShowGlobal = true
  getGlobalList()
}
const checkDetails = async (row: any) => {
  data.isShowDetails = true
  data.checkedItem = row
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changeSizeGlobal = (val: number) => {
  data.queryGlobal.size = val
}
const changePageGlobal = (val: number) => {
  data.queryGlobal.page = val
  getGlobalList()
}

// 重置
const onHideDetails = (show: boolean) => {
  data.isDisableUser = false
  data.isShowDetails = false
  data.checkedItem = {} as any
  if (show) {
    if (data.isShowGlobal) {
      getGlobalList()
    } else {
      getSearchList()
    }
  }

}
const OperatorRef = ref<any>()
const resetDetails = () => {
  if (data.isShowGlobal) {
    data.queryGlobal = {
      page: 1,
      size: 50,
      agent_id: data.queryGlobal.agent_id,
      id: '',
      remark: '',
    }
  } else {
    data.query = {
      page: 1,
      size: 50,
      operated_id: -1,
      agent_id: -1,
    }
  }
  OperatorRef.value.onHideDetails()
  if (data.isShowGlobal) {
    getGlobalList()
  } else {
    getSearchList()
  }
}
</script>

<style lang="scss" scoped></style>
